<template>
    <div>
        <div>【关键词条】</div>
        <div ref="target" class="w-full h-full"></div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

const props = defineProps({
    data: {
        type: Object,
        required: true
    }
})

// 1、初始化 echarts 实例
let chart = null
const target = ref(null)
onMounted(() => {
    chart = echarts.init(target.value)
    renderChart()
})

const randomRGB = () => {
    const r = Math.floor(Math.random() * 255)
    const g = Math.floor(Math.random() * 255)
    const b = Math.floor(Math.random() * 255)
    return `rgb(${r}, ${g}, ${b})`
}

// 2、构建 option 配置对象
const renderChart = () => {
    const options = {
        series: [
            {
                type: 'wordCloud',
                sizeRange: [8, 46], // 文字大小范围
                rotationRange: [0, 0], // 文字旋转
                gridSize: 0, // 文字间距
                layoutAnimation: true,
                textStyle:  {
                    color: randomRGB
                },
                emphasis: {
                    textStyle: {
                        fontWeight: 'bold',
                        color: '#000'
                    }
                },
                data: props.data.datas
            }
        ]
    }

    // 3、通过 实例.setOption(option) 渲染图表
    chart.setOption(options)
}

watch(() => props.data, () => { renderChart() }, { deep: true })
</script>

<style lang="scss" scoped></style>